<template>
	<div class="dashboard-container">
		<div class="shouye-t" style="margin-top: 5px;">
			<span style="color:#FF5722; font-weight:bold;">{{name}}，AIDT管理平台欢迎您！</span>
		</div>
		<div v-show="showHome">
			<fieldset v-show="showAcount">
				<legend>财务统计汇总</legend>
				<div>
					<div style="display: flex;">
						<Card style="flex: 1;margin: 5px; background:rgb(45, 140, 240); color:#fff;">
							<p slot="title" class="ff">今日新增用户</p>
							<div style="font-weibold:block;">
								<span>{{ list.newUserToday == null ? 0 : list.newUserToday }}</span>
							</div>
						</Card>
						<Card style="flex: 1;margin: 5px; background:rgb(25, 190, 107); color:#fff;">
							<p slot="title" class="ff">总用户量</p>
							<div>
								<span>{{ list.totalUser == null ? 0 : list.totalUser }}</span>
							</div>
						</Card>
						<Card style="flex: 1;margin: 5px; background:rgb(255, 153, 0); color:#fff;">
							<p slot="title" class="ff">累计直推</p>
							<div>
								<span>{{ list.push == null ? 0 : list.push }}</span>
							</div>
						</Card>
						<Card style="flex: 1;margin: 5px; background:rgb(237, 63, 20); color:#fff;">
							<p slot="title" class="ff">累计释放</p>
							<div>
								<span>{{ list.releaseCandy == null ? 0 : list.releaseCandy }}</span>
							</div>
						</Card>

					</div>
					<div style="display: flex;">
						<Card style="flex: 1;margin: 5px; background:#27c955; color:#fff;">
							<p slot="title" class="ff">累计充值</p>
							<div>
								<span>{{ list.sumRecharge == null ? 0 : list.sumRecharge }}</span>
							</div>
						</Card>
						<Card style="flex: 1;margin: 5px; background:rgb(154, 102, 228); color:#fff;">
							<p slot="title" class="ff">累计提币</p>
							<div>
								<span>{{ list.accumulatedWithdrawal == null ? 0 : list.accumulatedWithdrawal }}</span>
							</div>
						</Card>
						<Card style="flex: 1;margin: 5px; background:#406ce7; color:#fff;">
							<p slot="title" class="ff">累计到账</p>
							<div>
								<span>{{ list.accumulatedAccrual == null ? 0 : list.accumulatedAccrual }}</span>
							</div>
						</Card>
						<!-- <Card style="flex: 1;margin: 5px; background:#406ce7; color:#fff;">
							<p slot="title" class="ff">累计充币</p>
							<div>
								<span>{{ list.sumRecharge == null ? 0 : list.sumRecharge }}</span>
							</div>
						</Card> -->
						<Card style="flex: 1;margin: 5px; background:rgb(228, 108, 187); color:#fff;">
							<p slot="title" class="ff">累计提币手续费</p>
							<div>
								<span>{{ list.appFee == null ? 0 : list.appFee }}</span>
							</div>
						</Card>

					</div>
				</div>
			</fieldset>
			<!-- <div class="base" style="margin-top: 20px;position: relative;" v-if="showNewList">
				<Card>
					<p slot="title"><span>最新交易记录</span><span style="float: right;color: #2D8cF0;cursor: pointer;" @click="toMore">查看更多 ></span></p>
					<Table stripe :columns="columns1" :data="newList" ref="table" :loading="loading"></Table>
				</Card>
			</div> -->
		</div>
		<img src="../../../assets/images/home-bg.png" width="100%" v-show="showBg">
	</div>
</template>

<script>
export default {
  data () {
    return {
      name: localStorage.getItem('name'),
      list: [], // 汇总数据
      newList: [], // 最新记录
      showHome: true,
      showAcount: true,
      showNewList: true,
      showBg: false,
      loading: false,
      columns1: [{
        title: '订单时间',
        align: 'center',
        key: 'createTime',
        sortable: true,
        render: (h, params) => {
          return h('div', params.row.createTime == null ? '#' : this.stringToTime(params.row.createTime))
        }
      },
      {
        title: '交易单号',
        align: 'center',
        key: 'tradeNum',
        render: (h, params) => {
          return h('div', params.row.tradeNum == null ? '#' : params.row.tradeNum)
        }
      },
      {
        title: 'UUID',
        align: 'center',
        key: 'uuid',
        render: (h, params) => {
          return h('div', params.row.uuid == null ? '#' : params.row.uuid)
        }
      },
      {
        title: '交易者姓名',
        align: 'center',
        key: 'trueName',
        render: (h, params) => {
          return h('div', params.row.trueName == null ? '#' : params.row.trueName)
        }
      },
      {
        title: '交易者手机号码',
        align: 'center',
        key: 'userName',
        render: (h, params) => {
          return h('div', params.row.userName == null ? '#' : params.row.userName)
        }
      },
      {
        title: '交易类型',
        align: 'center',
        key: 'tradeType',
        render: (h, params) => {
          return h('div', params.row.tradeType == null ? '#' : params.row.tradeType == 1 ? '买入' : params.row.tradeType == 2 ? '卖出' : '#')
        }
      },
      {
        title: '花费数量',
        align: 'center',
        key: 'num',
        render: (h, params) => {
          return h('div', params.row.num == null ? '#' : params.row.tradeType == 1 ? this.Fixed(params.row.num) + ' USDT' : params.row.tradeType == 2 ? this.Fixed(params.row.num) + ' ATM' : '#')
        }
      },
      {
        title: '手续费比例',
        align: 'center',
        key: 'ratio',
        render: (h, params) => {
          return h('div', params.row.ratio == null ? '#' : params.row.ratio * 100 + '%')
        }
      },
      {
        title: '手续费',
        align: 'center',
        key: 'fee',
        render: (h, params) => {
          return h('div', params.row.fee == null ? '#' : this.Fixed(params.row.fee) + ' ATM')
        }
      },
      {
        title: '实际得到数量',
        align: 'center',
        key: 'actualNum',
        render: (h, params) => {
          return h('div', params.row.actualNum == null ? '#' : params.row.tradeType == 1 ? this.Fixed(params.row.actualNum) + ' ATM' : params.row.tradeType == 2 ? this.Fixed(params.row.actualNum) + ' USDT' : '#')
        }
      },
      {
        title: '交易状态',
        align: 'center',
        key: 'status',
        render: (h, params) => {
          return h('div', '成功')
        }
      }
      ]
    }
  },
  methods: {
    getList () {
      this.axios.get('/admin/accounting/statistical').then(res => {
        if (res.data.code == 200) {
          this.list = res.data.data
          // console.log(this.list)
        }
      })
    },
    toMore () {
      this.$router.push('transactionManagement/tradingFlow')
    },
    getNewsList () {
      this.loading = true
      this.axios.get('/admin/trading/release/statistical', {
        params: {
          current: 1, // 当前页【可选，默认1】
          size: 20 // 每页记录数【可选，默认20】
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.newList = res.data.data.records
          this.loading = false
        }
      })
    }
  },
  created () {
    let show
    this.axios.get('admin/index/authorize').then(res => {
      if (res.data.code == 200) {
        show = res.data.data
        if (show.indexOf(1) == -1) {
          this.showHome = false
          this.showBg = true
        } else {
          show.indexOf(16) == -1 ? (this.showAcount = false) : this.getList()
          show.indexOf(5) == -1 ? (this.showNewList = false) : this.getNewsList()
        }
      }
    })
  },
  mounted () {
    this.$Message.config({
      top: 250
    })
  }
}
</script>

<style>
	.shouye-t {
		margin-bottom: 10px;
		padding: 15px;
		line-height: 22px;
		border-left: 5px solid #2db7f5;
		border-radius: 0 2px 2px 0;
		background-color: #e9eaec;
	}

	.ivu-card-head p {
		font-weight: normal;
	}

	.CardTransparent {
		background: transparent;
		border: 0;
	}

	.CardTransparent:hover {
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0);
	}

	.ivu-card-head .ff {
		color: #fff;
	}
</style>
